<template>
  <div id="box">
        <div>
            <img class="big" src="../img/01more.png" alt="">
        </div>
        <ul>
            <li v-for="(item,i) in list2" :key="i">
              <router-link :to="'/topic'+item.productId">
                <img :src="$store.state.imgsrc+item.productsImg" alt="">
                <p class="title">{{item.productName}}</p>
                <div class="bottomDiv">
                    <span class="span1">
                        ¥{{item.productPrice}}
                    </span>
                    <span class="span2">
                        {{item.sales}}人已付款
                    </span>
                </div>
              </router-link>
            </li>
        </ul>
        <p v-if="loading" style="margin-top:10px;" class="loading">
          <span></span>
        </p>
        <p v-if="noMore" style="margin-top:10px;font-size:13px;color:#ccc" class="noMore">没有更多了</p>
    </div>

</template>

<script>
import {homeOne} from '@/api'
export default {
    props:{
        isBottom:{
            type:Boolean,
            default:false
        }
    },
  data() {
    return {
      count: 6,//起始页数值为0
      loading: false,
      totalPages: "",//取后端返回内容的总页数
      list2:[],
      list:[
          {
            img:'',
            name:'商品1',
            price:30,
            count:1000
          },
          {
            img:'',
            name:'商品1',
            price:30,
            count:1000
          },
          {
            img:'',
            name:'商品1',
            price:30,
            count:1000
          },
          {
            img:'',
            name:'商品1',
            price:30,
            count:1000
          },
          {
            img:'',
            name:'商品1',
            price:30,
            count:1000
          },
          {
            img:'',
            name:'商品1',
            price:30,
            count:1000
          },
          {
            img:'',
            name:'商品1',
            price:30,
            count:1000
          },
          {
            img:'',
            name:'商品1',
            price:30,
            count:1000
          },
          {
            img:'',
            name:'商品1',
            price:30,
            count:1000
          },
          {
            img:'',
            name:'商品1',
            price:30,
            count:1000
          },

      ],
      oneList2:[]
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
    //   return this.count >= this.totalPages - 1;
      return this.oneList2.length == this.list2.length;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  created(){
    this.getHomeOne()
  },
  mounted(){
      this.list2 = [...this.oneList2.slice(0,this.count)]
      console.log(this.$parent._data.isBottom)
  },
  watch:{
      isBottom(){
          console.log(this.isBottom,'更新')
          if(this.isBottom == true){
              this.load()
          }
      }
  },
  methods: {
    load() {
            this.count += 2
            this.loading = true;
            setTimeout(() => {
              this.list2 = this.oneList2.slice(0,this.count) //页数+1
              this.loading = false
               //调用接口，此时页数+1，查询下一页数据
            }, 1000);
        
    },
    getHomeOne(){
          homeOne({
              discounts:0
          }).then(res=>{
              // console.log(res,'homeone')
              this.oneList2 = res.data.data
          })
        }
  }
};
</script>

<style scoped>
.bottomDiv{
    position: relative;
}
.span1{
    color: #FF380D;
}
.span2{
    position: absolute;
    font-size: 12px;
    top: 1vh;
    left: 20vw;
}
.title{
    color: #333333;
    line-height: 4.5vh;
}
.noMore{
    text-align: center;
}
ul{
    display: flex;
    flex-wrap: wrap;
}
li{
    padding-top: 2vh;
    padding-left: 4vw;
    padding-right: 2vw;
    padding-bottom: 1vh;
}
.big{
    width: 100vw;
    height: 23vh;
}
.loading span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #409eff;
  border-left: transparent;
  animation: zhuan 0.5s linear infinite;
  border-radius: 50%;
}
@keyframes zhuan {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
img{
    width: 43vw;
    height: 18vh;
}
</style>